<template>
	<view class="p-l-24 p-t-26 p-r-24">
		<view class="bg-white">
			<view class="flex  input-item">
				<view class="flex" style="width: 580upx;">
					<u-icon name="account-fill" color="#666" size="48" class="m-r-14"></u-icon>
					<u-input class="flex-1" placeholder="联系人" v-model="addressObj.contact" ></u-input>
				</view>
			</view>
			<view class="flex  input-item">
				<view class="flex"  style="width: 580upx;">
					<u-icon name="phone-fill" color="#666" size="48" class="m-r-14"></u-icon>
					<u-input  class="flex-1"  placeholder="联系人电话" v-model="addressObj.telephone"></u-input>
				</view>
			</view>
			<view class="flex  input-item row-between">
				<view class="flex" style="width: 580upx;">
					<u-icon name="map-fill" color="#666" size="48" class="m-r-14"></u-icon>
					<u-input class="flex-1" placeholder="地区选择"  v-model="region"  :disabled="true"  @click="areaShow=true"></u-input>
				</view>
				<view class="">
					<u-icon name="arrow-right" color="#666"></u-icon>
				</view>
			</view>
			<view class="flex  input-item row-between">
				<view class="flex line-1" style="width: 580upx;">
					<u-icon name="edit-pen-fill" color="#666" size="48" class="m-r-14"></u-icon>
					<u-input class="flex-1"  placeholder="详细地址" v-model="addressObj.address" :disabled="true" @click.prevent="detail" ></u-input>
				</view>
				<view class="">
					<u-icon name="arrow-right" color="#666"></u-icon>
				</view>
			</view>
		</view>
		<view class="footer-con" >
			<view class="footer-btn bg-primary white md flex row-center " @click="addSure" >{{address_id==null?'确认添加':'确认修改'}}</view>
		</view>
		<u-select v-model="areaShow" mode="mutil-column-auto" @confirm="regionChange" :list="areaList"></u-select>
	</view>
</template>

<script>
	import {
		editAddress,
		getOneAddress,
		hasRegionCode,
		addAddress
	} from '@/api/user';
	import area from '@/utils/area'
	export default {
		data() {
			return {
				areaShow:false,
				areaList:[],
				addressObj: {
					contact: '',
					telephone: '',
					province_id: '',
					city_id: '',
					district_id: '',
					address: '',
					is_default: false,
					latitude:'',
					longitude:'',
					
				},
				region:'',
				address_id:null
			}
		},
		onLoad({id}) {
			if(!!id){
				this.address_id = id;
				this.getOneAddressFun(this.address_id)
			}
			this.$nextTick(function(){
				this.areaList = area;
			})
		},
		methods: {
			getOneAddressFun(id){
				getOneAddress(id).then(res=>{
					console.log(res);
					this.addressObj = res.data;
					this.region = this.addressObj.province + this.addressObj.city + this.addressObj.district
				})
			},
			regionChange(e){
				console.log(e);
				this.region = e[0].label + e[1].label + e[2].label;
				this.addressObj.province_id = e[0].value;
				this.addressObj.city_id = e[1].value;
				this.addressObj.district_id = e[2].value;
			},
			detail(){
				uni.chooseLocation({
					success:res=>{
						console.log(res);
						this.addressObj.longitude = res.longitude;
						this.addressObj.latitude = res.latitude;
						this.addressObj.address = res.name;
					}
				})
			},
			addSure(){
				let {addressObj,address_id} = this;
				if(address_id){
					editAddress({...addressObj}).then(res=>{
						if(res.code==1){
							this.$toast({
								title:'修改成功'
							})
							uni.$emit('update');
							setTimeout(()=>{
								uni.navigateBack({
									
								})
							},1500)
							
						}
					})
					return 
				}
				
				
				
			
				addAddress({...addressObj}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.$toast({
							title:'添加成功'
						})
						uni.$emit('update');
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1500)
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.input-item{
		height: 120upx;
		// line-height: 120upx;
		padding-left: 30upx;
		padding-right: 24upx;
		border-bottom: 2upx solid #f7f7f7;
	}
	.footer-con{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
		margin: 0 auto;
		    // width: 100%;
		    padding: 20rpx;
		    background-color: #fff;
		.footer-btn{
			color: #fff;
			height: 80upx;
			width: 716upx ;
			text-align: center;
			line-height: 80upx;
			border-radius: 12upx;
			background-color: #F27A57;
		}
	}
</style>
